<template>
  <d2-container>
    <div class="w-main docs-view">
    <div class="view-box">
      <div class="view-head">
        <div class="header-title">
          234
        </div>
        <el-button
          class="header-button"
          @click="toggleFullscreen"
          >{{ isFullscreen ? "退出全屏" : "全屏" }}</el-button
        >
      </div>
      <div class="view-main">
        <div class="view-body">
          <Flow
            ref="myFlow"
            class="body-flow"
            v-if="fileType === 'flow'"
            v-model="docContent"
            :readOnly="true"
          ></Flow>
          <Minder
            ref="myMind"
            class="body-mind"
            v-else-if="fileType === 'mind'"
            v-model="docContent"
            :readOnly="true"
          ></Minder>
          <Sheet
            v-else-if="fileType === 'sheet'"
            ref="mySheet"
            class="body-sheet"
            v-model="docContent.content"
            :readOnly="true"
          ></Sheet>
          <MarkdownPreview
            v-else-if="fileType === 'md'"
            :initialValue="docContent.content"
          ></MarkdownPreview>
          <ReportContent v-else-if="fileType === 'td'" :content="docContent.content"></ReportContent>
        </div>
      </div>
    </div>
    </div>
  </d2-container>
</template>

<script>
import data from '../utils/data'
import Vue from 'vue'
import Minder from '@/components/hk-minder'
Vue.use(Minder)

const Flow = resolve => require(['@/components/hk-flow/index'], resolve)
const Sheet = resolve => require(['@/components/hk-sheet/index'], resolve)
const MarkdownPreview = resolve =>
  require(['@/components/hk-MDEditor/components/preview/index'], resolve)
const ReportContent = resolve => require(['@/components/hk-TEditorView/TEditorView'], resolve)

export default {
  components: { Flow, Sheet, MarkdownPreview, ReportContent },
  data () {
    return {
      isFullscreen: false,
      docContent: {},
      fileType: '',
      id: ''
    }
  },
  mounted () {
    console.log(this.$route)

    if (this.$route.query.docContent) {
      this.fileType = this.$route.query.fileType
      this.docContent = JSON.parse(this.$route.query.docContent)
    } else {
      this.id = this.$route.params.id
      this.getDataById()
    }
    document.addEventListener('fullscreenchange', () => {
      this.isFullscreen = !!document.fullscreenElement
    })
  },
  methods: {
    getDataById () {
      switch (this.id) {
        case '111':
          this.fileType = 'flow'
          break
        case '222':
          this.fileType = 'mind'
          break
        case '333':
          this.fileType = 'sheet'
          break
        case '444':
          this.fileType = 'md'
          break
        case '555':
          this.fileType = 'td'
          break
        default:
          break
      }
      if (this.fileType === 'flow') {
        this.docContent = JSON.parse(data.flowJson)
      } else if (this.fileType === 'mind') {
        this.docContent = JSON.parse(data.mindJson)
      } else if (this.fileType === 'sheet') {
        this.docContent = JSON.parse(data.sheetJson)
      } else if (this.fileType === 'md') {
        this.docContent = JSON.parse(data.mdJson)
      } else if (this.fileType === 'td') {
        this.docContent = JSON.parse(data.tdJson)
      }
    },
    toggleFullscreen () {
      if (this.isFullscreen) {
        this.exitFullscreen()
      } else {
        this.launchFullscreen(this.$el)
      }
    },
    launchFullscreen (element) {
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen()
      }
    },

    exitFullscreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.view-body {
   background-color: #ffffff;
  .view-body-content {
    .markdown-preview,
    .report-content {
      margin: 0 !important;
      padding: 0 !important;
    }
    .minder-editor-container {
      transform: translateZ(0);
    }
    .body-sheet {
      box-sizing: content-box;
      * {
        box-sizing: content-box;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.docs-view {
  background-color: #ffffff;
  .view-box {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    .view-head {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 38px;
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 99;
      background-color: #ffffff;
      .header-title {
        flex: 1;
        color: #333333;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 16px;
        font-weight: 500;
        white-space: nowrap;
        em {
          padding: 0 3px;
          font-weight: normal;
        }
      }
      .header-hint {
        padding-right: 22px;
        font-size: 12px;
        color: #666;
        white-space: nowrap;
        .ivu-btn {
          font-size: 12px;
          padding: 0 10px;
        }
        .ivu-dropdown-item {
          font-size: 12px !important;
        }
      }
      .header-button {
        font-size: 12px;
        margin-right: 12px;
      }
    }
    .view-main {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      &.view-book {
        .view-menu {
          border-right: 0;
          width: 100%;
          .view-menu-list {
            padding: 18px 8%;
          }
        }
        .view-body {
          display: none;
        }
      }
      .view-menu {
        position: relative;
        height: 100%;
        width: 280px;
        border-right: 1px solid #e6ecf1;
        .view-menu-list {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          padding: 18px 12px;
          overflow: auto;
        }
      }
      .view-body {
        flex: 1;
        height: 100%;
        position: relative;
        .view-body-content {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          padding: 18px;
          overflow: auto;
        }
      }
    }
  }
}
</style>
